// babel 处理语法树

// Babel 插件通关秘籍: https://juejin.cn/book/6946117847848321055

// @babel/core babel编译器的核心
// https://www.npmjs.com/package/babylon babel使用的js解析器
// @babel/types 对ast节点的操作
// @babel/traverse 对ast的遍历
// @babel/generator 将ast转换为代码

import babel from "@babel/core";
import types from "@babel/types";
import traverse from "@babel/traverse";
import generate from "@babel/generator";

// vue
// https://github.com/vuejs/vue/blob/main/src/compiler/index.ts

// function baseCompile(baseCompile, options) {
//   const ast = parse(template.trim(), options);
//   optimize(ast, options);
//   const code = generate(ast, options);
//   return {
//     ast,
//     render,
//   };
// }

// babel三步曲
// 解析（parse），转换（transform），生成（generate）

// babel 插件开发指南: https://github.com/brigand/babel-plugin-handbook/blob/master/translations/zh-Hans/README.md

import pluginTransformReactJsx from "./plugin-transform-react-jsx.mjs";

const sourceCode = "<div id='root' key='root'>hello world</div>";

// 1. code => ast
// 2. 遍历 ast 做转换
const result = babel.transform(sourceCode, {
  // plugins: [[pluginTransformReactJsx, { runtime: "classic" }]],
  plugins: [pluginTransformReactJsx],
});

console.log(result.code);
